import React, { useState, useMemo } from 'react';
import { Tabs } from 'antd';
import TemplateTpl from './TemplateTpl';
import ContainerTpl from './ContainerTpl';
import styles from './index.less';

interface IProps {
  contentScrollTop: number;
}

function DraggableContainer(props: IProps) {
  const { contentScrollTop } = props;
  const [activePane, setActivePane] = useState('1');
  const showTpl = useMemo(() => {
    switch (activePane) {
      case '2':
        return <TemplateTpl />;
      default:
        return <ContainerTpl />;
    }
  }, [activePane]);
  return (
    <div className={styles.draggableContainer}>
      <Tabs defaultActiveKey="1" onChange={(val) => setActivePane(val)}>
        <Tabs.TabPane tab="容器" key="1"></Tabs.TabPane>
        <Tabs.TabPane tab="组件" key="2"></Tabs.TabPane>
      </Tabs>
      <div className={styles.draggableContent}>{showTpl}</div>
    </div>
  );
}

export default DraggableContainer;
